<template>
  <div>
    <el-card class="mb-5">
      <div class="flex items-center">
        <div class="text-xl font-bold">
          查询
        </div>

        <el-input
          v-model="form.data.username"
          placeholder="账户名"
          :maxlength="16"
          prefix-icon="el-icon-user"
          style="width:150px;margin-left:100px;"
        />
        <el-input
          v-model="form.data.ename"
          placeholder="企业名"
          :maxlength="32"
          prefix-icon="el-icon-office-building"
          style="width:150px;margin-left:30px;"
        />
        <el-select
          v-model="form.data.etype"
          placeholder="企业类型"
          clearable
          style="width:150px;margin-left:30px;"
        >
          <el-option
            v-for="(item, index) in this.$store.state.ent_type"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
        <el-input
          v-model="form.data.tel"
          placeholder="电话"
          :maxlength="11"
          clearable
          prefix-icon="el-icon-tel-outline"
          style="width:150px;margin-left:30px;"
        />
        <el-input
          v-model="form.data.email"
          placeholder="邮箱"
          :maxlength="50"
          clearable
          prefix-icon="el-icon-message"
          style="width:200px;margin-left:30px;"
        />

        <div class="ml-auto">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="submit"
          >
            查询
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="text-center">
      <el-table
        :data="table.data"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="账户名"
        />
        <el-table-column
          prop="ename"
          label="企业名"
        />
        <el-table-column
          prop="etype"
          label="企业类型"
        />
        <el-table-column
          prop="tel"
          label="电话"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          label="操作"
        >
          <template>
            <el-button
              size="small"
              plain
              icon="el-icon-edit"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        data: {
          username: undefined,
          ename: undefined,
          etype: undefined,
          tel: undefined,
          email: undefined
        }
      },
      table: {
        data: []
      }
    }
  },
  methods: {
    submit () {
      this.axios.get('/api/admin/userList', {
        headers: {
          token: this.$store.state.admin.token
        },
        params: {
          username: this.form.data.username || undefined,
          ename: this.form.data.ename || undefined,
          etype: this.form.data.etype || undefined,
          tel: this.form.data.tel || undefined,
          email: this.form.data.email || undefined
        }
      }).then(function (r) {
        if (r.data.success) {
          this.table.data = r.data.detail
        } else {
          this.$alert(r.data.msg)
        }
      }.bind(this))
    }
  }
}
</script>
